<template>
    <ElCard shadow="hover" class="ccc h-[100%]">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <ElSkeleton :loading="!info" animated :rows="4">
                <el-tab-pane label="流量" name="liu_linag">
                    <liuLianEchart :info="info" :label="activeName" />
                </el-tab-pane>
                <el-tab-pane label="磁盘" name="ci_pan">
                    <ciPanEchart :info="info" :label="activeName" />
                </el-tab-pane>
            </ElSkeleton>
        </el-tabs>
    </ElCard>

</template>
<script setup lang="ts">
import { ref, } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import liuLianEchart from "./liuLianEchart.vue"
import ciPanEchart from "./ciPanEchart.vue"

const ciPanRef = ref(null)
const props = defineProps({
    info: {
        default: () => null
    },
})





const activeName = ref('liu_linag')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab.props.name, event)
}



</script>
<style lang="less" scoped>
.ccc {
    :deep(.demo-tabs) {
        .el-tabs__content {
            overflow: inherit;
        }
    }

}
</style>